<template>
  <div ref="chart" style="width:50%;height: 550px" class="echart"></div>

</template>

<script setup>
import * as echarts from 'echarts';
import {ref,onMounted} from 'vue';

/* const data = localStorage.getItem('data'); */
const data = JSON.parse(localStorage.getItem('data'))
const chart = ref()

console.log("data:", data); // 输出: [0, 0, 0, 0, 1, 0]

onMounted(()=>{
  chartInit()
})

/* const scoresList = localStorage.getItem('scoresList')
console.log("scoresList:",scoresList) */


function chartInit(){
  //基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(chart.value);

  const option = {
    xAxis: {
      type: 'category',
      /* data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']  */
      /*  type: 'scores', */
       data: ['0-20', '21-40', '41-60', '61-80', '81-100', '101-120'],
       axisLabel:{
        fontSize:15
       }
    },
    yAxis: {
      type: 'value',
      axisLabel:{
        fontSize:20
       }
    },
    series: [
      {
      data: data,
      type: 'bar'
      }
    ]
  };

  //使用刚指定的配置项和数据显示图表
  myChart.setOption(option);
}




</script>